<!--
 * @Author: wangshuguang
 * @Date: 2022-04-07 17:23:08
 * @LastEditTime: 2022-04-28 17:16:02
 * @LastEditors: wangshuguang
 * @Description: 文件描述...
-->
<template>
  <div>
    <div class="leftLine">开通金额</div>
    <div class="textInfo">基础费用：{{ plugDetail.openAmt }}元</div>
    <div v-if="plugData.code == 'supermember'">
      <div class="leftLine">插件权益</div>
      <div class="textInfo">
        <div>成为超级会员核心商家</div>
        <div>拥有{{ plugDetail.merQuota }}个合作商家名额</div>
        <div>享受插件交易实付金额的{{ plugDetail.sumBkgeRate }}%返佣</div>
      </div>
      <div v-if="plugDetail.pluginSpecialConfs && plugDetail.pluginSpecialConfs.length" class="leftLine">特殊费用</div>
      <div v-if="plugDetail.pluginSpecialConfs && plugDetail.pluginSpecialConfs.length" class="textInfo">
        <div v-for="item of plugDetail.pluginSpecialConfs" :key="item.confId">
          <span v-if="item.isAddYear">超过{{ item.merNum }}个合作商户名额，每个名额加收{{ item.addYearAmt }}元</span>
          <span v-else>超过{{ item.merNum }}个合作商户名额,不加收费用</span>
        </div>
      </div>
    </div>
    <!-- <div class="agreementBox">
      <el-radio v-model="agreement" :label="true">
        同意<span class="agreement">营销插件服务条款</span>
      </el-radio>
    </div> -->
    <div class="btns">
      <el-form v-if="plugDetail.openAmt" :v-model="form" label-width="100px">
        <el-form-item label="支付方式">
          <el-select v-model="form.payType" placeholder="请选择" size="small" class="width100">
            <!-- <el-option label="微信支付" value="WX" /> -->
            <el-option label="支付宝支付" value="ZFB" />
            <el-option :disabled="plugDetail.openAmt > wallNum" :label="`钱包余额（剩余￥${wallNum}）`" value="WALL" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-button size="small" @click="$emit('close')">取消</el-button>
      <el-button type="primary" size="small" @click="save">{{ this.plugDetail.openAmt ? '支付' : '开通' }}</el-button>
    </div>

    <el-dialog
      title="支付"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      append-to-body
      width="40%"
      custom-class="infoConfigDialog"
    >
      <!-- 支付中 -->
      <div v-if="!payResult.payStatus">
        <div v-if="form.payType == 'WALL'">
          <el-form :v-model="form" label-width="100px">
            <el-form-item label="支付金额">
              ￥{{ plugDetail.openAmt }}元
            </el-form-item>
            <el-form-item label="业务">开通{{ plugData.name }}插件</el-form-item>
            <el-form-item label="支付方式">{{ `钱包余额（剩余￥${wallNum}）` }}</el-form-item>
            <el-form-item label="支付密码">
              <PwdInput @getPwd="getPwd" />
            </el-form-item>
          </el-form>
        </div>
        <div v-else>
          <div>支付结果查询中。。。</div>
        </div>
      </div>
      <!-- 支付结果展示 -->
      <el-form v-else :v-model="form" label-width="100px">
        <div class="statusHead">
          <div class="imgIcon">
            <i :class="payResult.payStatus == 'S' ? 'el-icon-success' : 'el-icon-error'" />
          </div>
          {{ payResult.payStatus == "S" ? '支付成功' : '支付失败' }}
        </div>
        <el-form-item v-show="payResult.payStatus == 'F'" label="失败原因">{{ payResult.failRemark }}</el-form-item>
        <el-form-item label="支付金额">￥{{ payResult.payAmt }}元</el-form-item>
        <el-form-item label="业务">开通{{ plugData.name }}插件</el-form-item>
        <el-form-item label="支付方式">{{ payType[form.payType] }}</el-form-item>
        <el-form-item label="支付单号">{{ payResult.payNo }}</el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div v-if="form.payType == 'ZFB'">
          <el-button type="primary" @click="payClose">确 定</el-button>
        </div>
        <div v-else-if="!payResult.payStatus">
          <el-button size="small" @click="dialogVisible = false">取消支付</el-button>
          <el-button type="primary" size="small" @click="wallPay">确认支付</el-button>
        </div>
        <div v-else>
          <el-button type="primary" @click="payClose">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { qryMerPluginDetail, buyPlug, qryPayStatus, qryMerWallBalance } from '@/api/plugCenter'
import { mapGetters } from 'vuex'
import PwdInput from '@/components/PwdInput'
export default {
  components: { PwdInput },
  props: { plugData: {} },
  data() {
    return {
      agreement: true,
      payResult: {},
      dialogData: {},
      dialogVisible: false,
      wallNum: 0,
      payType: {
        'ZFB': '支付宝',
        'WALL': '钱包余额'
      },
      payTimerNum: 0,
      form: {
        pwd: '',
        payType: 'ZFB',
        payMoney: {}
      },
      plugDetail: {}
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'businessInfo'])
  },
  mounted() {
    qryMerPluginDetail({
      businessId: this.businessInfo.id,
      code: this.plugData.code
    }).then(res => {
      this.plugDetail = {
        ...res.data
      }
      console.log('plugDetail', this.plugDetail)
    })
    // 获取余额
    qryMerWallBalance().then(res => {
      this.wallNum = res.data
    })
  },
  methods: {
    goBack() {
      const { type } = this.$route.query
      if (type == 'openSupPlug') {
        // 如果是超级会员页面跳转过来，添加完成后回跳原页面
        this.$router.push({ name: 'MarketingActivitySuperMember' })
      } else {
        this.$emit('sucClose')
      }
    },
    save() {
      console.log('this.agreement', this.agreement)
      if (!this.agreement) {
        this.$message.error('请先同意营销插件协议')
        return
      } else if (this.plugDetail.openAmt) {
        // 需要支付金额
        if (this.form.payType == 'ZFB') {
          // 支付宝支付
          this.zfbPay()
        } else {
          // 余额支付
          // this.wallPay()
          this.dialogVisible = true
        }
      } else {
        // 不需要支付金额  直接调用接口
        buyPlug({
          pluginCode: this.plugDetail.pluginCode,
          type: 1,
          payAmt: 0,
          payType: '',
          subject: '商户开通插件'
        }).then(res => {
          this.$message.success('开通成功！')
          // this.$emit('sucClose')
          this.goBack()
        })
      }
    },
    zfbPay() {
      // 支付宝支付
      buyPlug({
        pluginCode: this.plugDetail.pluginCode,
        payAmt: this.plugDetail.openAmt,
        type: 1,
        payType: 'alipay',
        subject: '商户开通插件'
      }).then(res => {
        console.log('res', res)
        const { aliFrom, payNo } = res.data
        sessionStorage.setItem('aliPayForm', aliFrom)

        const { href } = this.$router.resolve({
          name: 'zfbPay'
        })
        window.open(href, '_blank')
        // 轮训接口 查询支付状态
        this.$confirm('是否已经完成支付?', '提示', {
          confirmButtonText: '我已支付',
          cancelButtonText: '未支付',
          type: 'warning'
        }).then(() => {
          // 轮训查询支付状态
          this.queryPayStatus(payNo)
          this.dialogVisible = true
        }).catch(() => {
          // this.$emit('sucClose')

          this.goBack()
        })
        // this.$message.success('开通成功！')
        // this.$emit('sucClose')
      })
    },
    wallPay() {
      // 余额支付
      buyPlug({
        pluginCode: this.plugDetail.pluginCode,
        payAmt: this.plugDetail.openAmt,
        'payPassword': this.form.pwd,
        type: 1,
        payType: 'wallet',
        subject: '商户开通插件'
      }).then(res => {
        this.payResult = { ...res.data }
      })
    },

    // 查询支付宝支付状态
    queryPayStatus(payNo) {
      qryPayStatus({
        payNo,
        type: 1
      }).then(res => {
        console.log('then', res)
        const { payStatus } = res.data
        if (payStatus == 'D') {
          // 超过6次终止轮训
          if (this.payTimerNum == 6) {
            this.$alert('网络忙，请稍后再试', '提示')
            // this.$emit('sucClose')
            this.goBack()
          } else {
            this.payTimerNum++
            this.getOrdetTimer = setTimeout(() => {
              this.queryPayStatus(payNo)
            }, 10 * 1000)
          }
        } else {
          this.payResult = { ...res.data }
        }
      })
    },
    getPwd(data) {
      console.log('getPwd', data)
      this.form.pwd = data
    },
    handleClose(done) {
      clearTimeout(this.payTimer)
      if (this.payResult.payStatus) {
        // 支付之后 刷新余额并关闭页面
        this.payClose()
        done()
      } else {
        done()
      }
    },
    payClose() {
      this.payResult = {}
      this.dialogVisible = false
      this.goBack()
      // this.$emit('sucClose')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.textInfo{
  color: #737373;
  font-size: 13px;
  padding: 20px 10px;
  line-height: 20px;
}
.agreement{
  text-decoration: underline;
  color: #3417FB;
  font-size: 12px;
  margin-left: 10px;
}
.btns{
  margin-top: 20px;
  padding: 20px 0;
  text-align: right;
  border-top: 1px solid #ddd;
}
.infoConfigDialog{
  .statusHead{
    text-align: center;
    font-size: 20px;
    .imgIcon{
      font-size: 50px;
      .el-icon-success{
        color: #19D5AE;
      }
      .el-icon-error{
        color: #FD0000;
      }
    }
  }
}
</style>
